<template>
    <div class="edit_container">
        <!--  富文本输入 -->
        <quill-editor
            v-model="content"
            class="editor"
            :id="id"
            :ref="id"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
        >
        </quill-editor>
        <WarningTip
            content="仅允许粘贴文本内容，粘贴内容中的图片、链接和样式将无效"
            placement="right"
        ></WarningTip>
        <div v-if="showMax" style="float: right;">{{ tiLength }} / {{ maxLength }}</div>
        <!-- <span style="color: #f90">
            <Icon type="ios-information-circle" />
            仅允许粘贴文本内容，粘贴内容中的图片、链接和样式将无效
        </span> -->
        <Upload
            ref="upload"
            style="display: inline-block"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :on-format-error="handleFormatErrorImg"
            :format="['jpg', 'jpeg', 'png', 'gif']"

            multiple
            :action="uploadUrl"
        >
            <Button icon="ios-cloud-upload-outline" id="imgUploadBtn" v-show="false">test</Button>
        </Upload>
        <Upload
            ref="fileUpload"
            style="display: inline-block"
            :show-upload-list="false"
            :on-success="handleFileSuccess"
            :on-format-error="handleFormatErrorFile"
            :format="['pdf']"
            multiple
            :action="fileUploadUrl"
        >
            <Button icon="ios-cloud-upload-outline" id="fileUploadBtn" v-show="false"></Button>
        </Upload>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
import { addQuillTitle } from '@/libs/quill-title';
//引入Qill插件
import Quill from 'quill';
let Link = Quill.import('formats/link'); //调用编辑器
class FileBlot extends Link {
    // 继承Link Blot
    static create(value) {
        let node = undefined;
        if (value && !value.href) {
            // 适应原本的Link Blot
            node = super.create(value);
        } else {
            // 自定义Link Blot
            node = super.create(value.href);
            node.innerText = value.innerText;
            node.href = value.href;
            node.id = value.id;
            node.setAttribute('title', '点击可导出:' + value.innerText);
            node.setAttribute('data-value', value.dataValue);
        }
        return node;
    }
}
FileBlot.blotName = 'link';
FileBlot.tagName = 'A';
//注册FileBlot
Quill.register(FileBlot);

// 富文本配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    //  ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    //  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    //  [{'direction': 'rtl'}],// 文本方向
    // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    //  [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'], // 链接、图片、视频
    ['file'] // pdf
];
// 富文本配置（题目名称）
const questionToolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    //  ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    //  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标
    // [{ indent: '-1' }, { indent: '+1' }], // 缩进
    //  [{'direction': 'rtl'}],// 文本方向
    // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    //  [{ font: [] }], // 字体种类
    // [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'] // 链接、图片、视频
    // ['file'] // pdf
];
const competeDescToolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    //  ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    //  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    //  [{'direction': 'rtl'}],// 文本方向
    // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    //  [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ['clean'] // 清除文本格式
];
export default {
    name: 'quillEditorComponents',
    props: {
        value:{ //v-model
            type: String,
            default: ''
        },
        dataValue: {
            type: String,
            default: ''
        },
        id: {
            type: String,
            default: 'myQuillEditor'
        },
        type: String, //如果是题目名称，去掉往左往右、文字排版、增加pdf样式
        showMax: {
            type: Boolean,
            default: () => false
        },
        maxLength: {
            type: Number,
        }
    },
    components: {
        quillEditor
    },
    data() {
        return {
            uploadUrl: '',
            fileUploadUrl: '',
            content: '',
            editorOption: {
                placeholder: '请输入内容',
                modules: {
                    clipboard: {
                        // 粘贴版，处理粘贴时候带图片
                        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
                    },
                    toolbar: {
                        //工具菜单栏配置
                        container:
                            this.type === 'questionName'
                                ? questionToolbarOptions
                                : this.type === 'competeDesc'
                                ? competeDescToolbarOptions
                                : toolbarOptions,
                        handlers: {
                            image: (value) => {
                                if (value) {
                                    // 图片、 文件导入点击事件
                                    document.querySelector('#imgUploadBtn').click();
                                } else {
                                    this.quill.format('image', false);
                                }
                            },
                            file: (value) => {
                                if (value) {
                                    document.querySelector('#fileUploadBtn').click();
                                }
                            }
                        }
                    }
                }
            },
            tiLength:0
        };
    },
    methods: {
        //发送图片
        handleSuccess(res) {
            if (res.code == 1) {
                // 获取光标所在位置
                // console.log(document.getElementById(this.id), this.$refs[this.id]);
                let quill = this.$refs[this.id].quill;
                // 获取光标所在位置
                let length =
                    quill.getSelection() && quill.getSelection().index
                        ? quill.getSelection().index
                        : 0;
                // 插入图片，res为服务器返回的图片链接地址
                let url = `/Learn/${res.data}`;
                quill.insertEmbed(length, 'image', url);
            } else {
                this.$Message.error(data.message);
            }
        },
        //发送文件
        handleFileSuccess(res) {
            if (res.code == 1) {
                // 获取光标所在位置
                let quill = this.$refs.myQuillEditor.quill;
                let length = quill.getSelection().index || 1;
                // 插入图片，res为服务器返回的图片链接地址
                let url = `${this.baseURL}/minio/download?path=${res.data}`; //`/Learn/${res.data}`
                quill.insertEmbed(length, 'text', '[');
                quill.insertEmbed(
                    length + 1,
                    'link',
                    {
                        href: url,
                        innerText: res.info.originalName,
                        id: res.info.id,
                        dataValue: `/Learn/${res.data}`
                    },
                    'api'
                );
                quill.insertEmbed(length + res.info.originalName.length + 1, 'text', ']');
            } else {
                this.$Message.error(data.message);
            }
        },
        handleFormatErrorFile() {
            this.$Message.warning('仅允许导入pdf格式文件');
        },
        handleFormatErrorImg() {
            this.$Message.warning('仅允许导入jpg,jpeg,png,gif格式文件');
        },
        handleCustomMatcher(node, Delta) {
            let ops = [];
            Delta.ops.forEach((op) => {
                // if (op.insert && typeof op.insert === 'string') {
                //     // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
                //     ops.push({
                //         insert: op.insert
                //     });
                // } else {
                //     ops.push(op);
                // }
                if (op.insert && typeof op.insert === 'string') { // 只有纯文本是字符串类型，其他包括图片、文件等，均忽略掉
                    ops.push({ // 只保留粘贴内容，格式全部舍弃
                        insert: op.insert,
                    })
                } else {
                    //  (op.insert && op.insert != '') ||(op.insert.image && op.insert.image.indexOf('/Learn') !== -1)
                    if (op.insert.image && op.insert.image.indexOf('/Learn') !== -1) {
                        //&& typeof op.insert === 'string' &&
                        if (op.insert.image) {
                            let src = op.insert.image;
                            let index = src.indexOf('Learn');
                            if (index > 1) {
                                op.insert.image = src.slice(index - 1);
                            }
                        }
                        ops.push(op);
                    }
                }
               
            });
            Delta.ops = ops;
            return Delta;
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange(e) {
            // 内容改变事件
            if (this.showMax) {
                if (this.content === '') {
                    this.tiLength = 0
                } else {
                    this.tiLength = e.quill.getLength() - 1
                }
                if (this.tiLength > this.maxLength) {
                    e.quill.deleteText(this.maxLength, this.tiLength - this.maxLength);
                }
                this.$emit('editorChange', this.content);
                this.$emit('input', this.content);
            } else {
                this.$emit('editorChange', this.content);
                this.$emit('input', this.content);
            }
        },

        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g, '<');
            str = str.replace(/&gt;/g, '>');
            return str;
        }
    },
    computed: {
        editor() {
            return this.$refs[this.id].quill;
        }
    },
    mounted() {
        // if (this.type === 'questionName') {
        //     this.editorOption.modules.toolbar.container = questionToolbarOptions;
        // } else {
        //     this.editorOption.modules.toolbar.container = toolbarOptions;
        // }
        this.content = this.value || this.dataValue;
        this.uploadUrl = `/api/minio/upload/permanent?visibility=company&type=images&bucket=images`;
        this.fileUploadUrl = `/api/minio/upload/permanent?visibility=company&type=docs&bucket=docs`;
        // 为编辑器图标加上title
        addQuillTitle();
    },
    watch: {
        dataValue(newVal) {
            if (this.editor) {
                if (newVal !== this.content) {
                    this.content = newVal;
                }
            }
        },
        value(newVal){
            if (this.editor) {
                if (newVal !== this.content) {
                    this.content = newVal;
                }
            }
        },
        content(newVal) {
            // console.log(newVal);
        }
    }
};
</script>
<style scoped>
.edit_container {
    position: relative;
}
.formButton {
    text-align: right;
    width: 100%;
    /* border-top: 1px solid #eee; */
    /*margin-top: 120px;*/
    /* padding-top: 16px; */
}
</style>
<style>
.ql-container.ql-snow {
    /* border: 1px solid #ccc; */
    min-height: 130px;
    border: 1px solid var(--default-color);
}
.ql-snow.ql-toolbar button.ql-file {
    font-size: 16px;
    display: inline-block;
    font-family: Ionicons;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: optimizeLegibility;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: -0.125em;
    text-align: center;
    color: var(--default-color);
    /* color: #999; */
}
.ql-snow.ql-toolbar button.ql-file:before {
    content: '\F255';
    /*"PDF"*/
}
</style>
